<template>
  <tn-navbar :bottom-shadow="false" fixed>
    <text class="title">挪车码预览</text>
  </tn-navbar>
  <view class="container">
    <view class="qrcode-container">
      <view class="vehicle-info">
        <text class="license-plate">{{ vehicle.licensePlate??'' }}</text>
        <text class="vehicle-desc">{{ vehicle.remark }}</text>
      </view>
      
      <view class="qrcode-preview">
        <image :src="qrcodeUrl+'?x-oss-process=style/template_list'" mode="aspectFit" class="qrcode-image"></image>
      </view>
      
      <view class="qrcode-desc">
        <text class="desc-text">扫描上方二维码，发送挪车请求</text>
      </view>
    </view>
    
    <view class="action-buttons">
      <button class="action-btn save-btn" @tap="saveToAlbum">保存到相册</button>
<!--      <button class="action-btn print-btn" @tap="printQrcode">打印</button>-->
    </view>
    
    <view class="tips-container">
      <view class="section-header">
        <text class="section-title">使用提示</text>
      </view>
      
      <view class="tips-list">
        <view class="tip-item">
          <text class="tip-number">1</text>
          <text class="tip-text">将二维码打印出来贴在车辆显眼位置</text>
        </view>
        <view class="tip-item">
          <text class="tip-number">2</text>
          <text class="tip-text">他人扫描二维码可发送挪车请求</text>
        </view>
        <view class="tip-item">
          <text class="tip-number">3</text>
          <text class="tip-text">您将通过微信收到挪车通知</text>
        </view>
        <view class="tip-item">
          <text class="tip-number">4</text>
          <text class="tip-text">建议使用防水材质打印，避免雨天损坏</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 获取页面参数
const vehicleId = ref('');
const styleId = ref('');
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  vehicleId.value = options.vehicleId;
  styleId.value = options.styleId;

  getVehicleDetail();
  getQrcodeUrl();
});

// 车辆信息
const vehicle = ref({licensePlate:'',remark:''});

// 二维码URL
const qrcodeUrl = ref(''); // 示例二维码图片

// 添加模拟数据 - 车辆详情
const mockVehicleDetails = {
  "10": {
    code: 200,
    msg: "success",
    data: {
      id: 10,
      instime: 1742056481,
      remark: "",
      qrcode_url: "https://pro-cdn.bugjianghu.com/nuogeche_qrcode/20250316/clIQvaSZ.png",
      itime: "2025-03-16",
      message: "请联系物业",
      webhook_url: "",
      notification_enabled: 0,
      licensePlate: "苏Y665557",
      moveCount: 0,
      notification: {
        enabled: 0,
        webhookUrl: ""
      }
    },
    timestamp: 1742879575
  },
  "9": {
    code: 200,
    msg: "success",
    data: {
      id: 9,
      instime: 1742051281,
      remark: "",
      qrcode_url: "https://pro-cdn.bugjianghu.com/nuogeche_qrcode/20250315/PO2behWt.png",
      itime: "2025-03-15",
      message: "",
      webhook_url: "",
      notification_enabled: 0,
      licensePlate: "沪U763618",
      moveCount: 0,
      notification: {
        enabled: 0,
        webhookUrl: ""
      }
    },
    timestamp: 1742879575
  }
};

// 添加模拟数据 - 模板详情
const mockTemplateDetails = {
  "10_39": "https://pro-cdn.bugjianghu.com/250320/pub_67dc182d5acb46.18019421.png", // 车辆10 + 模板39
  "10_38": "https://pro-cdn.bugjianghu.com/250320/pub_67dc182d5acb46.18019421.png", // 车辆10 + 模板38
  "9_39": "https://pro-cdn.bugjianghu.com/250320/pub_67dc182d5acb46.18019421.png",  // 车辆9 + 模板39
  "9_38": "https://pro-cdn.bugjianghu.com/250320/pub_67dc182d5acb46.18019421.png"   // 车辆9 + 模板38
};

// 获取车辆详情
const getVehicleDetail = async () => {
  // 使用模拟数据替代API调用
  setTimeout(() => {
    // 获取对应ID的模拟数据
    const mockData = mockVehicleDetails[vehicleId.value];
    if (mockData) {
      vehicle.value = mockData.data;
    } else {
      // 如果没有找到对应ID的数据，使用默认数据
      vehicle.value = {
        licensePlate: '模拟车牌',
        remark: '模拟备注'
      };
    }
  }, 500);
};

// 获取二维码URL
const getQrcodeUrl = async () => {
  // 使用模拟数据替代API调用
  setTimeout(() => {
    // 获取对应车辆ID和样式ID的模拟数据
    const key = `${vehicleId.value}_${styleId.value}`;
    if (mockTemplateDetails[key]) {
      qrcodeUrl.value = mockTemplateDetails[key];
    } else {
      // 如果没有找到对应的模拟数据，使用默认模板
      qrcodeUrl.value = "https://pro-cdn.bugjianghu.com/250320/pub_67dc182d5acb46.18019421.png";
    }
  }, 500);
};

// 保存到相册
const saveToAlbum = () => {
  uni.showLoading({
    title: '保存中...'
  });
  uni.downloadFile({
    url: qrcodeUrl.value,
    success: (res) => {
      if (res.statusCode === 200) {
        // 保存图片到相册
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.hideLoading();
            uni.showToast({
              title: '已保存到相册',
              icon: 'success'
            });
          },
          fail: (err) => {
            uni.hideLoading();
            uni.showModal({
              title: '保存失败',
              content: '请检查是否授权相册权限',
              showCancel: false
            });
            console.error('保存到相册失败:', err);
          }
        });
      } else {
        uni.hideLoading();
        uni.showToast({
          title: '图片下载失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      uni.hideLoading();
      uni.showToast({
        title: '图片下载失败',
        icon: 'none'
      });
      console.error('下载图片失败:', err);
    }
  });
  // 模拟下载和保存过程
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '已保存到相册',
      icon: 'success'
    });
  }, 1500);
};

// 分享二维码
const shareQrcode = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
};

// 打印二维码
const printQrcode = () => {
  uni.showLoading({
    title: '准备打印...'
  });
  
  // 实际项目中应调用打印相关API
  setTimeout(() => {
    uni.hideLoading();
    uni.showModal({
      title: '打印提示',
      content: '请连接打印机后再试，或将二维码保存到相册后打印',
      showCancel: false
    });
  }, 1000);
};
</script>

<style>
.container {
  padding: 20rpx;
}

.qrcode-container {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vehicle-info {
  text-align: center;
  margin-bottom: 30rpx;
}

.license-plate {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.vehicle-desc {
  font-size: 28rpx;
  color: #666;
}

.qrcode-preview {
  margin-bottom: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
}

.qrcode-image {
  width: 100%;
  height: 600rpx;
}

.qrcode-desc {
  text-align: center;
}

.desc-text {
  font-size: 28rpx;
  color: #666;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.action-btn {
  width: 30%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.save-btn {
  background-color: #1aad19;
  color: white;
}

.share-btn {
  background-color: #1989fa;
  color: white;
}

.print-btn {
  background-color: #f0f0f0;
  color: #666;
}

.tips-container {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.tips-list {
  padding: 0 10rpx;
}

.tip-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-number {
  width: 40rpx;
  height: 40rpx;
  background-color: #1aad19;
  color: white;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.tip-text {
  flex: 1;
  font-size: 28rpx;
  color: #666;
}
</style> 